﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>客户信息</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-table.css" rel="stylesheet" />
    <script src="~/scripts/jquery-1.10.2.min.js"></script>
    <script src="~/scripts/bootstrap.min.js"></script>
    <script src="~/scripts/bootstrap-table.js"></script>
    <script src="~/scripts/locale/bootstrap-table-zh-CN.js"></script>
    <script type="text/javascript">
        function initTable() {
            $("#table").bootstrapTable('destroy');
            $("#table").bootstrapTable({
                columns: [
                    { checkbox: true, visible: true },
                    { field: 'ID', title: 'ID', sortable: true, align: 'center', valign: 'middle', visible: false },
                    { field: 'CustomerCode', title: '客户代码', align: 'center', valign: 'middle' },
                    { field: 'CustomerName', title: '客户名称', align: 'center', valign: 'middle' },
                    { field: 'EmployeeCode', title: '业务员', align: 'center', valign: 'middle' },
                    { field: 'AtrMan', title: '法人', align: 'center', valign: 'middle' },
                    { field: 'TelephoneCode', title: '联系方式', align: 'center', valign: 'middle' },
                    { field: 'FaxCode', title: '传真', align: 'center', valign: 'middle' },
                    { field: 'PostCode', title: '邮编', align: 'center', valign: 'middle' },
                    { field: 'Email', title: 'Email', align: 'center', valign: 'middle' },
                    { field: 'Linkman', title: '联系人', align: 'center', valign: 'middle' },
                    { field: 'Url', title: '网址', align: 'center', valign: 'middle' },
                    { field: 'Address', title: '地址', align: 'center', valign: 'middle' },
                    { field: 'GradeCode', title: '客户等级', align: 'center', valign: 'middle' },
                    { field: 'StateCode', title: '客户状态', align: 'center', valign: 'middle' },
                    { field: 'CreditCode', title: '信用等级', align: 'center', valign: 'middle' },
                    { field: 'TradeCode', title: '行业', align: 'center', valign: 'middle' },
                    {
                        field: 'ID',
                        title: '操作',
                        align: 'center',
                        valign: 'middle',
                        formatter: actionFormatter
                    },
                ],
                url: '@Url.Action("getCustomerRecords", "Record")',
                method: 'POST',
                contentType: 'application/x-www-form-urlencoded;charset=UTF-8',//发送到服务器的数据编码类型，适用于post请求
                toolbar: '#toolbar',
                striped: true,
                cache: true,
                pagination: true,
                sortable: true,
                sortOrder: "asc",
                sidePagination: 'server',           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
                pageSize: 10,                     //每页的记录行数（*）
                pageList: [10, 25, 50, 100],
                search: false,
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列（选择显示的列）
                showRefresh: true,
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: false,                //是否启用点击选中行
                //height: 390,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                showToggle: false,                   //是否显示详细视图和列表视图的切换按钮
                //cardView: true,                    //是否显示详细视图
                detailView: false,      //是否显示父子表
                paginationPreText: "上一页",
                paginationNextText: "下一页",
                //得到查询参数
                queryParams: function (params) {
                    var temp = {
                        limit: params.limit,//页面大小
                        offset: params.offset,//要跳过的页码
                        sortcolumsname: params.sort,
                        order: params.order,
                        txtCustomerCode:$("#txtCustomerCode").val(),
                        txtCustomerName:$("#txtCustomerName").val(),
                        txtEmployeeCode:$("#txtEmployeeCode").val(),
                        txtStateCode:$("#txtStateCode").val(),
                        txtTradeCode:$("#txtTradeCode").val()
                    };
                    return temp;
                },
                //onDblClickRow: function (row) {
                //    var id = row.ID;
                //    Edit(id, "editById");
                //}
            });
        }
        $(function () {
            initTable();
            $("#btn-search").click(function () {
                $("#table").bootstrapTable("refresh");
            });
            $("#btn-reset").click(function () {
                $("#txtCustomerCode").val("");
                $("#txtCustomerName").val("");
                $("#txtEmployeeCode").val("");
                $("#txtStateCode").val("");
                $("#txtTradeCode").val("");
                $("#table").bootstrapTable("refresh");
            });

        });
        //操作列格式化函数
        function actionFormatter(value, row, index) {
            var id = value;
            var result = "";
            result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"Edit('" + id + "','editById')\" title='编辑'><span class='glyphicon glyphicon-edit'></span></a>";
            result += "&nbsp;&nbsp;<a href='javascript:;' class='btn btn-xs red' onclick=\"Delete('" + id + "','deleteById')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
            return result;
        }
    </script>
</head>
<body>
    <div style="padding-top:10px;padding-left:15px;padding-right:15px;">
        <div class="alert alert-info alert-dismissible" role="alert" >
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <strong>温馨提示：</strong> 该模块部分功能正在开发中...
        </div>
        <div class="form-group-sm">
            <div class="col-xs-2">
                <input type="text" id="txtCustomerCode" class="form-control" placeholder="客户编号" />
            </div>
            <div class="col-xs-2">
                <input type="text" id="txtCustomerName" class="form-control" placeholder="客户名称" />
            </div>
            <div class="col-xs-2">
                <input type="text" id="txtEmployeeCode" class="form-control" placeholder="业务员编号" />
            </div>
            <div class="col-xs-2">
                <input type="text" id="txtStateCode" class="form-control" placeholder="客户状态" />
            </div>
            <div class="col-xs-2">
                <input type="text" id="txtTradeCode" class="form-control" placeholder="行业名称" />
            </div>
            <div style="float:right;">
                <button id="btn-search" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>  搜索</button>
                <button id="btn-reset" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>  重置</button>
            </div>
            
        </div>
        <div id="toolbar" class="btn-group-sm">
            <button id="btn-add" type="button" class="btn btn-success">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 新增
            </button>
            <button id="btn-edit" onclick="Edit(2, 'editByButton')" type="button" class="btn btn-success">
                <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> 修改
            </button>
            <button id="btn-delete" onclick="Delete(2, 'deleteByButton');" type="button" class="btn btn-success">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 删除
            </button>
        </div>
        <table id="table"></table>
    </div>
</body>
</html>
